<script setup>
import ProgrammeItem from './ProgrammeItem.vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  showExpand: {
    type: Boolean,
    default: false,
  },
})

const isExpand = ref(false)

const toggleExpand = () => {
  isExpand.value = !isExpand.value
}

const _list = computed(() => {
  if (!props.showExpand) {
    return props.list
  }
  return isExpand.value ? props.list : props.list.slice(0, 2)
})
</script>

<template>
  <view class="programme-list">
    <ProgrammeItem
      v-for="item in _list"
      :key="item.id"
      :info="item"
    />
    <view
      v-if="showExpand && list.length > 2"
      class="expand"
      @click.stop="toggleExpand"
    >
      <text>
        {{ isExpand ? '收起' : '展开' }}
      </text>
      <wd-icon
        v-if="isExpand"
        name="chevron-up"
        size="40rpx"
      ></wd-icon>
      <wd-icon
        v-else
        name="chevron-down"
        size="40rpx"
      ></wd-icon>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.expand {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  color: $uni-color-primary;
  font-size: 24rpx;
}
</style>
